import styled from 'styled-components'
import logoPic from '../../statics/logo.png'

export const HeaderWrapper = styled.div`
  position: fixed;
  top:0;
  right: 0;
  left: 0;
  z-index: 1030;
  height:56px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  border-color: #f0f0f0;
`
export const HeaderWLimit = styled.div`
  position:relative;
  margin: 0 auto;
  min-width:748px;
  max-width:1440px;
`

export const Logo = styled.div`
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100px;
  height:56px;
  background: url(${logoPic});
  background-size:contain;
`
export const Nav = styled.div`
  width:945px;
  height:56px;
  padding-right:40px;
  box-sizing:border-box;
  margin: 0 auto;
`

export const NavItem = styled.div`
  line-height: 56px;
  font-size: 17px;
  padding: 0 15px;
  color: #333333;
  &.left{
    float:left;
  }
  &.active{
    color:#ec6149;
  }
  &.right{
    float: right;
    color:#969696;
  }
`
export const SearchWrapper = styled.div`
  position:relative;
  float:left;
  .slide-enter{
    transition: all .3s ease-out;
  }
  .slide-enter-active{
    width: 240px;
  }
  .slide-exit{
    transition: all .3s ease-out;
  }
  .slide-exit-active{
    width: 160px;
  }
  .iconfont{
    position:absolute;
    right:5px;
    top:13px;
    width:30px;
    line-height:30px;
    background:#e3e3e3;
    text-align:center;
    border-radius: 15px;
  }
  & SearchInfoTitle{
    
  }
`

export const SearchInfo = styled.div`
  position:absolute;
  top:58px;
  left:20px;
  width:260px;
  min-height:100px;
  background:red;
  box-shadow: 0 0 8px rgba(0,0,0,.2);
  background-color: #fff;
  border-radius: 4px;
  padding: 20px 20px 10px;
  box-sizing: border-box;
`
export const SearchInfoTitle = styled.div`
  font-size: 14px;
  color:#969696;
  overflow:hidden;
  a{
    position:relative
    .iconfont{
      position: absolute;
      left: -15px;
      top: 1px;
      width: 12px;
      line-height: 12px;
      background: #f1efef;
      text-align: center;
      border-radius: 15px;
      font-size: 12px;
      transition: all 0.8s ease-out;
      tranfrom-origin: center center;
    }
  }

`
export const SearchInfoLeft = styled.div`
  float:left;
`
export const SearchInfoRight = styled.a`
  float:right;
`

export const SearchInfoMain = styled.div`
  overflow:hidden;
`
export const SearchInfoMainItemWrapper = styled.ul`
  margin-top:10px;
`
export const SearchInfoMainItem = styled.li`
  float:left;
  display:block;
  padding: 1px 4px;
  font-size:14px;
  margin: 5px 10px 5px 0;
  border: 1px solid #cacaca;
  border-radius: 3px;
  color: #787878;
`


export const NavSearch = styled.input.attrs({
  placeholder:'查询'
})`
  &.focused{
    width:240px;
  }
  &.focused+.iconfont{
    background:#969696;
    color:#ffffff
  }
  &::placeholder{
    color:#a0a0a0;
  }
  width:160px;
  padding:0 30px 0 20px;
  box-sizing:border-box;
  margin-top:9px;
  margin-left:20px
  height:38px;
  border-radius:19px;
  background:#EEEEEE;
  outline: none;
  border:none;
  color:#777
  font-size:14px;
`
export const Addition = styled.div`
  position:absolute;
  right:0;
  top:0;
`
export const Button = styled.button`
  float:right;
  margin-top:9px;
  margin-right:20px;
  padding: 0 20px;
  font-size: 15px;
  line-height:38px;
  border-radius: 19px;
  border: 1px solid #ec6149;
  color:  #ec6149;
  background:  #ffffff;
  &:first-child{
    background: #ec6149;
    color:  #ffffff;
  }
`